<template>

	<view class="number_keyboard">
		<view class="number_keyboard_left">
			<view class="number_keyboard_left_item" v-for="(item,index) in numList" :key='index' @click="onClick(item)">
				{{item}}
			</view>
			<view class=" number_keyboard_left_item number_keyboard_left_item_0" @click="onClick('0')">0</view>
			<view class=" number_keyboard_left_item" @click="onClick('.')">.</view>
		</view>
		<view class="number_keyboard_right">
			<view class="number_keyboard_right_delete flex-c-c" @click="onDelete">x</view>
			<view class="number_keyboard_right_pay flex-c-c" @click="onPay">付款</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			value: {
				type: [Number, String],
				default: ''
			}
		},
		data() {
			return {
				numList: [1, 2, 3, 4, 5, 6, 7, 8, 9]
			}

		},
		methods: {
			onClick(number) {
				let judegDian = this.value.indexOf('.')
				if (this.value.length == 1 && this.value[0] == '0' && number != '.') return //第一次输入是零 第二次只能是点
				if (!this.value[0] && number == '.') return //第一次输入不能是 0 或者 .
				if (judegDian > -1 && number == '.') return //假如已经有一个点了就不能仔输入
				if (judegDian > -1 && this.value.length == judegDian + 3) return //只能最大输入小数点后两位
				this.$emit('input', String(this.value) + String(number))

			},
			onDelete() {
				if (this.value[0]) {
					this.$emit('input', this.value.substring(0, this.value.length - 1))
				}
			},
			onPay() {
				if (this.value < 0) return this.$toast('请输入金额')
				console.log(this.value)
				this.$emit('paymentClick')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.number_keyboard {
		display: flex;
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1rpx solid rgba(0, 0, 0, .1);
		font-size: 35rpx;

		.number_keyboard_left {
			display: flex;
			flex: 1;
			flex-wrap: wrap;

			.number_keyboard_left_item {
				width: 33.33%;
				display: flex;
				justify-content: center;
				height: 120rpx;
				align-items: center;
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);
				border-right: 1rpx solid rgba(0, 0, 0, .1);
			}

			.number_keyboard_left_item_0 {

				width: 66.66%;
			}

		}

		.number_keyboard_right {
			display: flex;
			flex-direction: column;
			width: 150rpx;

			.number_keyboard_right_delete {
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);
				height: 120rpx;
			}

			.number_keyboard_right_pay {
				flex: 1;
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);
				background-color: #1AAD19;
				color: #FFFFFF;
			}
		}

		.flex-c-c {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
